import { useState, useEffect } from 'react'
import { Card, Button, Space, Table, Drawer, Form, Input, message, Popconfirm } from 'antd'
import { getNoticeList, addNotice, editNotice, delNotice } from '@/api/notice'
import type { TableProps } from 'antd'
import { noticeItem } from '@/types/api'

const { TextArea } = Input
function notice() {
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [noticeList, setNoticeList] = useState<noticeItem[]>([])
  useEffect(() => {
    getList()
  }, [page])
  const getList = () => {
    getNoticeList(page).then(res => {
      if (res.status === 200) {
        setNoticeList(res.data.list)
        setTotal(res.data.totalCount)
      }
    })
  }
  const columns: TableProps<any>['columns'] = [
    {
      title: '公告标题',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '发布时间',
      dataIndex: 'create_time',
      key: 'create_time'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size='middle'>
          <Button
            size='small'
            type='text'
            style={{ color: '#409eff' }}
            onClick={() => {
              editNoticeBtn(record)
            }}
          >
            修改
          </Button>

          <Popconfirm
            placement='bottomLeft'
            title={''}
            description='是否要删除该公告？'
            okText='确认'
            cancelText='取消'
            onConfirm={() => {
              delNoticeBtn(record.key)
            }}
          >
            <Button size='small' type='text' danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  const data: any[] = noticeList.map(item => {
    return {
      key: item.id,
      name: item.title,
      title: item.title,
      content: item.content,
      create_time: item.create_time
    }
  })
  const pageChange = (e: any) => {
    setPage(e.current)
  }
  // 新增/修改的抽屉弹框
  const [open, setOpen] = useState(false)
  const [form] = Form.useForm()
  const saveAddNotice = () => {
    form.validateFields().then(values => {
      if (editId !== 0) {
        editNotice(editId, values).then(res => {
          if (res.status === 200) {
            page === 1 ? getList() : setPage(1)
            message.success('修改成功')
            setOpen(false)
            form.resetFields()
          }
        })
        return
      }
      addNotice(values).then(res => {
        if (res.status === 200) {
          page === 1 ? getList() : setPage(1)
          message.success('添加成功')
          setOpen(false)
          form.resetFields()
        }
      })
    })
  }

  const delNoticeBtn = (id: number) => {
    delNotice(id).then(res => {
      if (res.status === 200) {
        message.success('删除成功')
        page === 1 ? getList() : setPage(1)
        setOpen(false)
      }
    })
  }
  // 修改
  const [editId, setEditId] = useState(0)
  const editNoticeBtn = (data: any) => {
    setEditId(data.key)
    form.setFieldsValue({
      title: data.title,
      content: data.content
    })
    setOpen(true)
  }
  const openDialog = () => {
    setOpen(true)
    form.resetFields()
  }

  const btn = (
    <div>
      <Button type='primary' size='large' onClick={saveAddNotice}>
        提交
      </Button>
      <Button
        size='large'
        style={{ marginLeft: '15px' }}
        onClick={() => {
          setOpen(false)
        }}
      >
        取消
      </Button>
    </div>
  )

  return (
    <>
      <Card>
        <Button onClick={openDialog}>新增</Button>
        <Table columns={columns} dataSource={data} pagination={{ total }} onChange={pageChange} />
      </Card>
      <Drawer
        title={editId === 0 ? '添加公告' : '修改公告'}
        onClose={() => {
          setOpen(false)
        }}
        open={open}
        footer={btn}
      >
        <Form name='basic' autoComplete='off' form={form}>
          <Form.Item
            label='公告标题'
            name='title'
            rules={[
              {
                required: true,
                message: '请输入公告标题'
              }
            ]}
          >
            <Input placeholder='请输入公告标题' />
          </Form.Item>
          <Form.Item
            label='公告内容 '
            name='content'
            rules={[
              {
                required: true,
                message: '请输入公告内容'
              }
            ]}
          >
            <TextArea rows={4} placeholder='请输入公告标题' />
          </Form.Item>
        </Form>
      </Drawer>
    </>
  )
}
export default notice
